<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">代金券列表</tn-navbar>
		<tn-sticky class="tn-white_bg">
			<view class="tn-p-sm tn-pb">
				<tn-search-box v-model="query.keyword" @search="getVoucherList" @clear="getVoucherList"
					search-button-bg-color="#F8F7F8" placeholder="请输入商家名称或电话" search-button-text-color="#AAAAAA" />
			</view>
			<view class="tn-p-sm tn-pl tn-gray-light_bg tn-flex items-center">
				<text>共 {{total}} 条记录</text>
			</view>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 70vh;"></loading>
		<view class="empty" style="height: 70vh;" v-else-if="voucherList.length == 0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view>
				<view class="tn-p tn-pb-sm border_bottom" v-for="item in voucherList" :key="item.id">
					<view class="tn-flex items-center justify-between">
						<view class="tn-flex items-center">
							<tn-avatar shape="square"
								:url="item.seller_image?item.seller_image:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
								size="xl" />
							<view class="tn-ml-sm tn-flex tn-flex-column tn-text-xs tn-flex-1">
								<text class="tn-mr-xs tn-text-ellipsis-1">商家名称：{{item.seller_name}}</text>
								<text style="margin-top:1px" class="tn-text-ellipsis-1">货款库存：{{item.stock}}</text>
								<text style="margin-top:1px" class="tn-text-ellipsis-1">增发库存：{{item.raise}}</text>
								<text style="margin-top:1px"
									class="tn-text-ellipsis-1">折扣售价：{{item.discount_price}}元</text>
							</view>
						</view>
					</view>
					<view class="tn-flex justify-between items-end tn-mt-xs">
						<view class="tn-flex-center-center" style="color: #AAAAAA;">
							<tn-icon name="tel" class="tn-mr-xs"></tn-icon>
							<text>{{item.contact_tel}}</text>
						</view>
						<tn-switch @change="goodsUpdate($event,item)" v-model="item.status" size="sm" shape="square"
							:active-value="1" :inactive-value="0" active-text="正常" active-color="tn-green"
							inactive-text="禁用" />
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="query.page" :pageSize="query.limit" @change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		getVoucherListApi,
		goodsUpdateApi
	} from "@/request/worktop/merchant.js"
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		getVoucherList()
	})

	const formRef = ref()
	const modalRef = ref()
	const isLoading = ref(true)
	const query = ref({
		page: 1,
		limit: 20,
		keyword: '',
	})
	const total = ref(0)
	const voucherList = ref([])

	// 获取代金券列表
	const getVoucherList = () => {
		isLoading.value = true
		getVoucherListApi(query.value).then(res => {
			if (res.code == 0) {
				total.value = res.other.total
				voucherList.value = res.data
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 更新页码
	const changePage = (e) => {
		query.value.page = e.current
		getVoucherList()
	}
	// 代金券上下架
	const goodsUpdate = (value, item) => {
		let obj = {
			id: item.seller_id,
			field: 'status',
			value
		}
		goodsUpdateApi(obj).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: res.message
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
</script>

<style scoped lang="scss">
</style>